<template>
  <div>
    <span>获取验证码({{ time }}s)</span>
  </div>
</template>

<script setup lang="ts">
//引入组合式API函数ref
import { ref, watch } from "vue";
//倒计时的事件
let time = ref<number>(5);
let props = defineProps(['flag'])
let $emit = defineEmits(['get-flag'])

watch(
  () => props.flag,
  () => {
    let timer = setInterval(() => {
      time.value--
      if (time.value == 0) {
        $emit('get-flag', false)
        clearInterval(timer)
      }
    }, 1000)
  },
  {
    immediate: true
  }
)


</script>

<style scoped></style>
